<template>
  <div class="app-container user-box">
    <!-- <el-row :gutter="20"> -->
    <el-card class="card-form">
      <div class="container-title">用户管理</div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input
            v-model="queryParams.nickName"
            placeholder="请输入姓名"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select
            v-model="queryParams.roleId"
            placeholder="用户角色"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in userRoleOptions"
              :key="dict.roleId"
              :label="dict.roleName"
              :value="dict.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="用户状态"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleQuery"
            >搜索</el-button
          >
          <el-button size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- </el-row> -->
    <el-row :gutter="20" class="mt10">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <el-card class="mt10">
          <div class="head-container">
            <el-input
              v-model="deptName"
              placeholder="请输入部门名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px; right:3px"
            />
          </div>
          <div class="head-container tree-box">
            <el-tree
              :highlight-current="true"
              :indent="0"
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick">
              <span slot-scope="{ node }" class="custom-tree-node over-ellipsis">
                <el-tooltip class="item" effect="dark" :content="node.label" placement="left-start">
                  <span>{{ node.label }}</span>
                </el-tooltip>
              </span>
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-card class="card-table">
          <el-table
            v-loading="loading"
            :data="userList"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              label="序号"
              type="index"
              width="65"
              align="center"
            />
            <el-table-column
              label="用户名"
              align="center"
              key="userName"
              prop="userName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="姓名"
              align="center"
              key="nickName"
              prop="nickName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="用户类型"
              align="center"
              key="leader"
              prop="userType"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span
                  >{{
                    scope.row.userType == 1
                      ? "委办局"
                      : scope.row.userType == 2
                      ? "三方机构"
                      : scope.row.userType == 3
                      ? "评审专家"
                      : scope.row.userType == 4
                      ? "项目单位"
                      : scope.row.userType == 5
                      ? "发改财政"
                      : scope.row.userType
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="所属组织"
              align="center"
              key="deptName"
              prop="dept.deptName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="角色"
              align="center"
              prop="roleName"
              width="120"
            />
            <el-table-column
              label="联系电话"
              align="center"
              key="phonenumber"
              prop="phonenumber"
              width="120"
            />
            <el-table-column label="状态" align="center" key="status">
              <template slot-scope="scope">
                <span
                  class="icon-state icon-blue"
                  v-show="scope.row.status == '0'"
                  ><span></span
                ></span>
                <span
                  class="icon-state icon-red"
                  v-show="scope.row.status == '1'"
                  ><span></span
                ></span>
                <span>{{ scope.row.status == 0 ? "正常" : scope.row.status == 1?"停用": scope.row.status}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleView(scope.row)"
                  >查看</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="handleJurisdiction(scope.row)"
                  v-hasPermi="['userManage:list:Jurisdiction']"
                  >分配权限</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户详情对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="openDataScope"
      width="800px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>
          <template slot="label"> 用户名 </template>
          {{ DataScopeForm.userName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 姓名 </template>
          {{ DataScopeForm.nickName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 联系电话 </template>
          {{ DataScopeForm.phonenumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 用户类型 </template>
          {{
            DataScopeForm.userType == 1
              ? "委办局"
              : DataScopeForm.userType == 2
              ? "三方机构"
              : DataScopeForm.userType == 3
              ? "评审专家"
              : DataScopeForm.userType == 4
              ? "项目单位"
              : DataScopeForm.userType == 5
              ? "发改财政"
              : DataScopeForm.userType
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 部门 </template>
          {{ DataScopeForm.deptName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 角色 </template>
          {{ DataScopeForm.roleName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 状态 </template>
          {{ DataScopeForm.status == "0" ? "正常" : "停用" }}
        </el-descriptions-item>
      </el-descriptions>
      <!-- 内层权限分配对话框 -->
      <el-dialog
        :title="title"
        :visible.sync="openJurisdictionIn"
        width="628px"
        append-to-body
        custom-class="dialog-box dialog-box-show"
      >
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="formData.userName"
              placeholder="请输入"
              style="width: 400px"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="姓名" prop="nickName">
            <el-input
              v-model="formData.nickName"
              placeholder="请输入"
              style="width: 400px"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="联系电话" prop="phonenumber">
            <el-input
              v-model="formData.phonenumber"
              placeholder="请输入"
              style="width: 400px"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-input
              v-model="isStatus"
              placeholder="请输入"
              style="width: 400px"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="用户类型" prop="userType">
            <el-select
              v-model="formData.userType"
              placeholder="请选择"
              clearable
              style="width: 400px"
            >
              <el-option
                v-for="dict in userTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="部门"
            prop="deptId"
            v-if="formData.userType != '2' && formData.userType != '3'"
          >
            <el-select
              v-model="formData.deptId"
              placeholder="请选择"
              clearable
              style="width: 400px"
              filterable
            >
              <el-option
                v-for="dict in userDeptOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="关联机构"
            prop="ormId"
            v-if="formData.userType == '2'"
          >
            <el-select
              v-model="formData.ormId"
              placeholder="请选择"
              clearable
              style="width: 400px"
              filterable
            >
              <el-option
                v-for="dict in organizationOptions"
                :key="dict.ormId"
                :label="dict.organizationName"
                :value="dict.ormId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="关联专家"
            prop="expertId"
            v-if="formData.userType == '3'"
          >
            <el-select
              v-model="formData.expertId"
              placeholder="请选择"
              clearable
              style="width: 400px"
              filterable
            >
              <el-option
                v-for="dict in expertOptions"
                :key="dict.expertId"
                :label="dict.dictLabel"
                :value="dict.expertId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="角色" prop="roleId">
            <el-select
              v-model="formData.roleId"
              placeholder="请选择"
              clearable
              style="width: 400px"
            >
              <el-option
                v-for="dict in userRoleOptions"
                :key="dict.roleId"
                :label="dict.roleName"
                :value="dict.roleId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="openJurisdictionIn = false">取消</el-button>
          <el-button type="primary" plain @click="submitFormJurisdictionIn"
            >保存</el-button
          >
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openDataScope = false">取 消</el-button>
        <el-button type="primary" @click="openJurisdictionShow" v-hasPermi="['userManage:dialog:Jurisdiction']"
          >分配权限</el-button
        >
      </div>
    </el-dialog>

    <!-- 权限分配对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="openJurisdiction"
      width="628px"
      append-to-body
      custom-class="dialog-box dialog-box-show"
    >
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="formData.userName"
            placeholder="请输入"
            style="width: 400px"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input
            v-model="formData.nickName"
            placeholder="请输入"
            style="width: 400px"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="phonenumber">
          <el-input
            v-model="formData.phonenumber"
            placeholder="请输入"
            style="width: 400px"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="状态" >
          <el-input
            v-model="isStatus"
            placeholder="请输入"
            style="width: 400px"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="用户类型" prop="userType">
          <el-select
            v-model="formData.userType"
            placeholder="请选择"
            clearable
            style="width: 400px"
          >
            <el-option
              v-for="dict in userTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="部门"
          prop="deptId"
          v-if="formData.userType != '2' && formData.userType != '3'"
        >
          <el-select
            v-model="formData.deptId"
            placeholder="请选择"
            clearable
            style="width: 400px"
            filterable
          >
            <el-option
              v-for="dict in userDeptOptions"
              :key="dict.deptId"
              :label="dict.deptName"
              :value="dict.deptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="关联机构"
          prop="ormId"
          v-if="formData.userType == '2'"
        >
          <el-select
            v-model="formData.ormId"
            placeholder="请选择"
            clearable
            style="width: 400px"
            filterable
          >
            <el-option
              v-for="dict in organizationOptions"
              :key="dict.ormId"
              :label="dict.organizationName"
              :value="dict.ormId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="关联专家"
          prop="expertId"
          v-if="formData.userType == '3'"
        >
          <el-select
            v-model="formData.expertId"
            placeholder="请选择"
            clearable
            style="width: 400px"
            filterable
          >
            <el-option
              v-for="dict in expertOptions"
              :key="dict.expertId"
              :label="dict.dictLabel"
              :value="dict.expertId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select
            v-model="formData.roleId"
            placeholder="请选择"
            clearable
            style="width: 400px"
          >
            <el-option
              v-for="dict in userRoleOptions"
              :key="dict.roleId"
              :label="dict.roleName"
              :value="dict.roleId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelJurisdiction">取消</el-button>
        <el-button type="primary" plain @click="submitFormJurisdiction"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  exportUser,
  resetUserPwd,
  changeUserStatus,
  importTemplate,
  getUserRole,
  getUserDept,
} from "@/api/systemManage/user";
import { listExpert } from "@/api/tripartite/expert";
import { listNoPageManagement } from "@/api/tripartite/organization";

import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "User",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      openDataScope: false,
      openJurisdiction: false,
      openJurisdictionIn: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      statusOptions: [],
      // 角色数据字典
      userRoleOptions: [],
      // 部门数据字典
      userDeptOptions: [],
      // 用户类型数据字典
      userTypeOptions: [],
      // 专家数据字典
      expertOptions: [],
      // 机构数据字典
      organizationOptions: [],
      // 性别状态字典
      sexOptions: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 表单参数
      form: {},
      DataScopeForm: {},
      formData: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickName: undefined,
        userName: undefined,
        status: undefined,
        deptId: undefined,
        roleId: undefined,
      },
      // 表单校验
      rules: {
        // nickName: [
        //   { required: true, message: "用户名不能为空", trigger: "blur" },
        // ],
        // userName: [
        //   { required: true, message: "姓名不能为空", trigger: "blur" },
        // ],
        // phonenumber: [
        //   { required: true, message: "电话不能为空", trigger: "blur" },
        // ],
        userType: [
          { required: true, message: "请选择用户类型", trigger: "change" },
        ],
        deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
        ormId: [
          { required: true, message: "请选择关联机构", trigger: "change" },
        ],
        expertId: [
          { required: true, message: "请选择关联专家", trigger: "change" },
        ],
        roleId: [
          { required: true, message: "请选择用户角色", trigger: "change" },
        ],
        // email: [
        //   {
        //     type: "email",
        //     message: "'请输入正确的邮箱地址",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // phonenumber: [
        //   {
        //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        //     message: "请输入正确的手机号码",
        //     trigger: "blur",
        //   },
        // ],
      },
      // 分配权限状态显示文字
      isStatus: undefined,
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getList();
    this.getTreeselect();
    this.getDicts("sys_normal_disable").then((response) => {
      this.statusOptions = response.data;
    });
    this.getDicts("user_type").then((response) => {
      // console.log('获取用户类型',response);
      this.userTypeOptions = response.data;
    });
    getUserRole().then((response) => {
      this.userRoleOptions = response.rows;
    });
    getUserDept().then((response) => {
      // console.log('部门',response);
      this.userDeptOptions = response.data;
    });
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.userList = response.list;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 查询专家列表 */
    getListExpert() {
      const data = { expertType: 0 };
      listExpert(data).then((response) => {
        // this.expertOptions = response.rows;
        let arr = response.rows;
        arr.map((item) => {
          this.$set(item, "dictLabel", item.expertName + ", " + item.workUnit);
        });
        this.expertOptions = JSON.parse(JSON.stringify(arr));
      });
    },
    /** 查询机构管理列表 */
    getListManagement() {
      listNoPageManagement().then((response) => {
        this.organizationOptions = response;
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      data.status = 1;
      console.log(data);
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.queryParams.deptId = data.id;
      this.getList();
    },
    // 取消按钮（用户权限）
    cancelJurisdiction() {
      this.openJurisdiction = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        nickName: undefined,
        userName: undefined,
        phonenumber: undefined,
        status:undefined,
        userType: undefined,
        deptId: undefined,
        ormId: undefined,
        expertId: undefined,
        roleId: undefined,
      };
      this.resetForm("formData");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.deptId = undefined
      this.resetForm("queryForm");
      this.getTreeselect()
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 查看按钮操作*/
    handleView(row) {
      this.reset();
      const userId = row.userId;
      getUser(userId).then((response) => {
        this.DataScopeForm = response.data;
        this.userRoleOptions = response.roles
        this.openDataScope = true;
        this.formData = response.data;
        if (this.formData.status == 0) {
          this.isStatus = "正常";
        } else {
          this.isStatus = "停用";
        }
        this.title = "查看用户详情";
      });
    },
    /** 权限分配按钮操作*/
    handleJurisdiction(row) {
      this.reset();
      const userId = row.userId;
      getUser(userId).then((response) => {
        this.formData = response.data;
        this.userRoleOptions = response.roles
        if (this.formData.status == 0) {
          this.isStatus = "正常";
        } else {
          this.isStatus = "停用";
        }
        this.openJurisdiction = true;
        this.title = "用户权限分配";
        this.getListExpert();
        this.getListManagement();
      });
    },
    /** 内层权限分配按钮操作*/
    openJurisdictionShow() {
      this.openJurisdictionIn = true;
      this.title = "用户权限分配";
      this.getListExpert();
      this.getListManagement();
    },
    // 内层权限按钮操作 保存
    submitFormJurisdictionIn() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          if (this.formData.userId != undefined) {
            updateUser(this.formData).then((response) => {
              this.msgSuccess("修改成功");
              this.openJurisdictionIn = false;
              this.openDataScope = false;
              this.getList();
            });
          } else {
            addUser(this.formData).then((response) => {
              this.msgSuccess("新增成功");
              this.openJurisdictionIn = false;
              this.openDataScope = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 权限*/
    submitFormJurisdiction: function () {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          if (this.formData.userId != undefined) {
            updateUser(this.formData).then((response) => {
              this.msgSuccess("修改成功");
              this.openJurisdiction = false;
              this.getList();
            });
          } else {
            addUser(this.formData).then((response) => {
              this.msgSuccess("新增成功");
              this.openJurisdiction = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.userId || this.ids;
      this.$confirm(
        '是否确认删除用户编号为"' + userIds + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delUser(userIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .head-container {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #ffffff !important;
    span {
      color: #3171ee !important;
    }
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("../../../assets/images/icon_child_act.png") no-repeat 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node {
    position: relative;

    padding-left: 16px;
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉

  // .el-tree-node__expand-icon.is-leaf{

  //   display: none;

  // }

  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  // .el-tree > .el-tree-node:before {

  //   border-left: none;

  // }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";

    left: -4px;

    position: absolute;

    right: auto;

    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";

    left: -4px;

    position: absolute;

    right: auto;

    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #d7d9de;

    bottom: 0px;

    height: 100%;

    top: -26px;

    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #d7d9de;

    height: 20px;

    top: 12px;

    width: 24px;
  }
}
.el-tree ::v-deep .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
//有子节点 且未展开
.el-tree ::v-deep .el-icon-caret-right:before {
  background: url("../../../assets/images/icon_jia.png") no-repeat 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
//有子节点 且已展开
.el-tree
  ::v-deep
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../../../assets/images/icon_jian.png") no-repeat 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
//没有子节点
.el-tree ::v-deep .el-tree-node__expand-icon.is-leaf::before {
  background: url("../../../assets/images/icon_child_nage.png") no-repeat 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
.container-title {
  font-size: 18px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  margin-bottom: 24px;
  color: #000000;
}
.card-table {
  margin-top: 10px;
  .el-pagination {
    text-align: center;
    margin-top: 40px;
  }
  // 状态样式
  .icon-state {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    position: relative;
    top: 3.5px;
    margin-right: 10px;
    span {
      display: inline-block;
      margin: 5px;
      width: 7px;
      height: 7px;
      border-radius: 16px;
    }
  }
  .icon-red {
    background: rgba(223, 32, 66, 0.1);
    span {
      background: #df2042;
    }
  }
  .icon-blue {
    background: rgba(49, 113, 238, 0.1);
    span {
      background: #3171ee;
    }
  }
  .icon-green {
    background: rgba(51, 168, 61, 0.1);
    span {
      background: #33a83d;
    }
  }
}
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
// tree树超出显示省略号
// .el-tree .over-ellipsis {
//   display: block;
//   width: 100%;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   white-space: nowrap;
//   -webkit-line-clamp: 1;
//   font-size: 0.072917rem;
// }
.tree-box {
  overflow: auto;
  border: none;
  overflow-y: hidden;
  .el-tree{
    display: inline-block;
    min-width:100% ;
  }
}
</style>
<style lang="scss">
/**表单label取消加粗 */
.card-form {
  .el-card__body {
    padding-bottom: 0;
  }
  label {
    font-weight: normal !important;
  }
  .el-form--inline .el-form-item {
    margin-right: 50px;
  }
}
/* 弹出窗样式 */
.dialog-box {
  .el-dialog__body {
    padding: 24px 69px 24px 69px;
    border-top: 1px solid #ebecef;
    border-bottom: 1px solid #ebecef;
    label {
      font-weight: 400 !important;
    }
  }
  .el-dialog__footer {
    padding: 16px 20px;
  }
  .el-dialog__headerbtn {
    background: url("../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-dialog__close {
      visibility: hidden;
    }
  }
}
// 分页居中
.card-table {
  .pagination-container {
    right: 30%;
  }
}
</style>
